<template>
	<uv-popup ref="modal" @maskClick="onCancel" mode="bottom">
		<view class="ss-p-24">
			<view class="">当前选择</view>
			<uv-gap height="15"></uv-gap>
			<view class="ss-flex ss-row-between ss-gap-12">
				<view class="ss-flex-1 ss-text-center">省</view>
				<view class="ss-flex-1 ss-text-center">市</view>
				<view class="ss-flex-1 ss-text-center">区</view>
			</view>
			<uv-gap height="10" ></uv-gap>
			<view class="ss-flex ss-row-between ss-gap-12">
				<view class="ss-flex-1">
					<scroll-view scroll-y="true" style="height: 50vh;">
						<view class="ss-flex-col ss-gap-12">
							<view @tap="chooseProvince(item)" :class="state.select.province_region_id == item.region_id?'active':'default'" v-for="(item,index) in state.province" :key="item.region_id">{{ item.region_name }}</view>
						</view>
					</scroll-view>
				</view>
				<view class="ss-flex-1">
					<scroll-view scroll-y="true" style="height: 50vh;">
						<view class="ss-flex-col ss-gap-12">
							<view @tap="chooseCity(item)" :class="state.select.city_region_id == item.region_id?'active':'default'" v-for="(item,index) in state.city" :key="item.region_id">{{ item.region_name }}</view>
						</view>
					</scroll-view>
				</view>
				<view class="ss-flex-1">
					<scroll-view scroll-y="true" style="height: 50vh;">
						<view class="ss-flex-col ss-gap-12">
							<view @tap="chooseArea(item)" :class="state.select.area_region_id == item.region_id?'active':'default'" v-for="(item,index) in state.area" :key="item.region_id">{{ item.region_name }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<uv-gap height="15"></uv-gap>
			<z-button @tap="">确认选择</z-button>
		</view>
	</uv-popup>
</template>

<script setup>
	import sheep from "@/sheep"
	const props = defineProps({
		modelValue:{
			type:Boolean,
			default:false
		}
	})
	const emit = defineEmits(['update:modelValue','confirm'])
	const state = reactive({
		show:false,
		province:[],
		city:[],
		area:[],
		indicatorStyle: `height: 50px;`,
		select:{
			province_region_id:'',
			city_region_id:'',
			area_region_id:''
		}
	})
	const modal = ref()
	watch(() => props.modelValue,(value) => {
		emit('update:modelValue',value)
		if(value) {
			modal.value.open()
			getRegionList({region_level:1}).then( res => {
				state.province = res
			})
		}
		else modal.value.close()
	})
	const onCancel = () => {
		emit('update:modelValue',false)
	}
	const confirm = () => {		
		// emit('update:modelValue',false)
		if(props.confirmClose) onCancel()
		emit('confirm')
	}
	function getRegionList(form = {}) {
		return new Promise((resolve,reject) => {
			sheep.$api.common.regionList(form).then(res => {
				let newData = res.data.list.map( item => {
					return {
						region_id:item.region_id,
						region_name:item.region_name
					}
				})
				resolve(newData)
			})
		})
	}
	function chooseProvince({ region_id }){
		state.select.province_region_id = region_id
		state.select.city_region_id = ''
		state.select.area_region_id = ''
		state.city = []
		state.area = []
		getRegionList({region_id}).then( res => {
			state.city = res
		})
	}
	function chooseCity({ region_id }){
		state.select.city_region_id = region_id
		state.select.area_region_id = ''
		state.area = []
		getRegionList({region_id}).then( res => {
			state.area = res
		})
	}
	function chooseArea({ region_id }){
		state.select.area_region_id = region_id
	}
</script>

<style lang="scss" scoped>
	.picker-view {
			width: 750rpx;
			height: 600rpx;
			margin-top: 60rpx;
		}
		.item {
				line-height: 100rpx;
				text-align: center;
			}
			
	.default {
		padding: 8rpx 16rpx;
		background-color: #ccc;
		border-radius: 8rpx;
		text-align: center;
	}
	.active {
		padding: 8rpx 16rpx;
		background-color: $main-color;
		border-radius: 8rpx;
		text-align: center;
		color: #fff;
	}		
</style>